import React, { Component } from 'react'
import { NavBar, Icon } from 'antd-mobile';
import { getCityList, getHot } from '../../api/home'
import { getCurrentCity } from '../../utils/index'
import NavHeader from '../../components/navHeaher/index';
// 导入list组件
import { List, AutoSizer } from 'react-virtualized'
import './index.css'
const TITlE_HEIGHT = 36;
const NAME_HEIGHT = 50;
const formatCityIndex = (letter) => {
    switch (letter) {
        case '#':
            return '当前定位'
        case 'hot':
            return '热门城市'
        default:
            return letter.toUpperCase()
        
    }
}
export default class CityList extends Component{
    state = {
        cityList: {},
        cityIndex: []
    }
    componentDidMount() {
        this.getCityList()
    }
    // 获取城市数据列表的方法
    async getCityList() {
        const { data } = await getCityList(1)
        const { cityList, cityIndex } = this.formatCityData(data.body)
        // 获取热门城市数据
        const res = await getHot()
        cityList['hot'] = res.data.body
        // 将索引添加到 cityIndex 中
        cityIndex.unshift('hot')

        // 获取当前定位城市
        const curCity = await getCurrentCity()
        cityList['#'] = [curCity]
        cityIndex.unshift('#')
        this.setState({
            cityList,
            cityIndex
        })
    }
    changeCity({label, value}) {
        localStorage.setItem('city', JSON.stringify({ label, value }))
        this.props.history.go(-1)
    }
    rowRenderer = ({
        key,
        index,
        isScrolling,
        isVisible,
        style
    }) => {
        const { cityIndex, cityList } = this.state
        const letter = cityIndex[index]
        return (
            <div key={key} style={style} className="city">
                <div className="title">{formatCityIndex(letter)}</div>
                {
                    cityList[letter].map(item =>
                        <div className="name" key={item.value} onClick={() => this.changeCity(item)}>{item.label}</div>
                    )
                }
            </div>
        )
    }
    formatCityData(list) {
        const cityList = {};
        list.forEach(item => {
            const first = item.short.substr(0, 1)
            if (cityList[first]) {
                cityList[first].push(item)
            } else {
                cityList[first] = [item]
            }
        })
        const cityIndex = Object.keys(cityList).sort()
        return {
            cityList,
            cityIndex
        }
    }
    // 创建动态计算每一行高度的方法
    getRowHeight = ({ index }) => {
        const { cityList, cityIndex } = this.state;
        return TITlE_HEIGHT + cityList[cityIndex[index]].length * NAME_HEIGHT
    }
    render() {
        return <div className="list-container">
            <NavHeader>请选择城市</NavHeader>

            {/* 城市列表 */}
            <AutoSizer>
                {
                    ({ height, width }) => (
                         <List
                            width={width}
                            height={height}
                            rowCount={this.state.cityIndex.length}
                            rowHeight={this.getRowHeight}
                            rowRenderer={this.rowRenderer}></List>
                    )
                }
            </AutoSizer>
            
        </div>
    }
}